<template>
  <div class="page-section">
    <h4 class="section-name">商城页面</h4>
    <!-- 我的页面、系统页面tab -->
    <div class="page-tab">
      <div class="tab-bg" :class="'active-bg' + activeTab"></div>
      <div class="tab-content">
        <div
          class="tab-item"
          :class="activeTab == index ? 'activeTab' : ''"
          v-for="(tab, index) in tabs"
          :key="index"
          @click="changeTab(index)"
        >
          {{ tab.text }}
        </div>
      </div>
    </div>
    <!-- 页面列表 (我的页面、系统页面共用) -->
    <div class="page-list" v-if="dataList.length">
      <div
        class="page-item"
        :class="activePage == index || initIndex == index ? 'activePage' : ''"
        v-for="(item, index) in dataList"
        :key="index"
        @click.stop="handlePageItem(item, index, $event)"
      >
        <div class="page-name">
          <span>{{ item.page_name }}</span>
          <p v-if="item.is_index == 1">首页</p>
        </div>
        <div class="page-action" v-if="item.page_type == 0">
          <a-tooltip placement="top">
            <span slot="title">复制页面链接</span>
            <i class="iconfont icon-huoquyemianlianjie"></i>
          </a-tooltip>
          <a-tooltip placement="top" v-if="item.system_type != 'cart'">
            <span slot="title">编辑页面</span>
            <i
              class="iconfont icon-mokuai-bianji"
              @click.stop="editPage(item)"
            ></i>
          </a-tooltip>
          <a-tooltip placement="top">
            <span slot="title">复制页面</span>
            <i class="iconfont icon-fuzhi" @click.stop="copyPage(item)"></i>
          </a-tooltip>
          <a-popover
            v-if="item.page_type == 0"
            placement="rightBottom"
            trigger="click"
            arrow-point-at-center
          >
            <template slot="content">
              <p class="popover-p" @click.stop="setIndexPage(item)">
                设置为首页
              </p>
              <p class="popover-p" @click.stop="deletePage(item)">删除</p>
            </template>
            <div>
              <i class="iconfont icon-gengduo"></i>
            </div>
          </a-popover>
        </div>
      </div>
    </div>

    <div class="add-page" v-if="activeTab == 0" @click="handleAddPage">
      <i class="iconfont icon-jiahao"></i>
      <span>添加页面</span>
    </div>
    <!-- 空状态 -->
    <a-empty v-if="!sysPageList.length && activeTab == 1" />
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    pageList: {
      type: Array,
      default: [],
    },
    systemPages: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      activeTab: 0,
      tabs: [
        {
          text: "我的页面",
          type: "mypage",
        },
        {
          text: "系统页面",
          type: "syspage",
        },
      ],
      activeMyPage: -1,
      activeSysPage: -1,
      initIndex: -1,
    };
  },
  watch: {
    globalCurrentPage(val) {
      console.log("页面变化了？？？？？？？？", val);
      let activeSysPage = this.sysPageList.findIndex((d) => {
        return d.id == val.id;
      });
      if (activeSysPage > -1) {
        this.activeSysPage = activeSysPage;
        this.activeTab = 1;
        return;
      }
      let activeMyPage = this.myPageList.findIndex((d) => {
        return d.id == val.id;
      });
      if (activeMyPage > -1) {
        this.activeMyPage = activeMyPage;
        this.activeTab = 0;
        return;
      }
    },
  },
  computed: {
    // 我的页面列表
    myPageList() {
      let arr = [];
      arr = this.pageList.filter((d) => {
        return d.page_type == 0;
      });
      console.log("我的页面：", arr);
      return arr;
    },
    // 系统页面列表
    sysPageList() {
      let arr = [];
      arr = this.systemPages.filter((d) => {
        return d.page_type == 1;
      });
      console.log("系统页面: ", arr);
      return arr;
    },
    // 页面列表展示数据
    dataList: {
      get() {
        if (this.activeTab == 0) {
          return this.myPageList;
        } else {
          return this.sysPageList;
        }
      },
      set(val) {
        this.dataList = val;
      },
    },
    // 设置active项
    activePage: {
      get() {
        if (this.activeTab == 0) {
          return this.activeMyPage;
        } else {
          return this.activeSysPage;
        }
      },
      set(val) {
        this.activePage = val;
      },
    },
    globalCurrentPage() {
      return this.$diyObser.store.currentPage;
    },
  },
  methods: {
    // 点击页面
    handlePageItem(item, index, e) {
      if (e.target.className == "iconfont icon-gengduo") return;
      if (this.activeTab == 0) {
        this.activeMyPage = index;
      } else {
        this.activeSysPage = index;
      }
      this.initIndex = -1;
      this.$emit("changePage", { item });
    },
    // tab切换
    changeTab(index) {
      this.activeTab = index;
    },
    // 添加页面
    handleAddPage() {
      this.$emit("addPage");
      this.activeTab = 0;
    },
    // 设置首页
    setIndexPage(item) {
      console.log(item);
      this.$emit("setIndexPage", { item });
    },
    // 删除页面
    deletePage(item) {
      console.log(item);
      this.$confirm({
        title: "提示",
        content: "确认删除该页面？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          console.log("确认删除");
          this.$emit("deletePage", { item });
        },
        onCancel: () => {
          console.log("取消");
        },
      });
    },
    // 复制页面
    copyPage(item) {
      this.$emit("copyPage", { item });
    },
    // 编辑页面
    editPage(item) {
      this.$emit("editPage", { item });
    },
    initPage() {
      let page = this.globalCurrentPage;
      this.dataList.forEach((d, index) => {
        if (d.id == page.id) {
          console.log(d);
          this.initIndex = index;
        }
      });
    },
  },
  mounted() {
    this.initPage();
  },
};
</script>

<style lang="scss" scoped>
.page-section {
  width: 100%;
  .section-name {
    width: 100%;
    height: 60px;
    background: #ffffff;
    padding: 24px 24px 14px 24px;
    font-size: 16px;
    color: #000000;
    margin: 0;
  }
  .page-tab {
    width: 280px;
    height: 40px;
    background: #f6f7f9;
    border-radius: 4px;
    margin: 8px auto 14px;
    position: relative;
    .tab-bg {
      width: 138px;
      height: 36px;
      background: #ffffff;
      border-radius: 4px;
      position: absolute;
      left: 1px;
      top: 2px;
      z-index: 11;
      transition: all 0.2s;
    }
    .active-bg0 {
      left: 1px;
    }
    .active-bg1 {
      left: 141px;
    }
    .tab-content {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 12;
      display: flex;
      justify-content: center;
      align-items: center;
      .tab-item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        opacity: 0.45;
        transition: all 0.2s;
        cursor: pointer;
        user-select: none;
        height: 100%;
      }
      .activeTab {
        opacity: 1;
      }
    }
  }
  .page-list {
    width: 282px;
    margin: 0 auto;
    .page-item {
      width: 280px;
      height: 40px;
      background: #ffffff;
      border: 1px solid #e8eaec;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 14px;
      margin-bottom: 14px;
      transition: all 0.2s;
      cursor: pointer;
      .page-name {
        display: flex;
        align-items: center;
        span {
          font-size: 14px;
          font-weight: 400;
          color: #000000;
          line-height: 1;
        }
        p {
          width: 28px;
          height: 16px;
          background: #1890fc;
          margin: 0;
          margin-left: 6px;
          border-radius: 2px;
          font-size: 10px;
          font-weight: 400;
          line-height: 16px;
          color: #ffffff;
          text-align: center;
        }
      }
      .page-action {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        display: none;
        .iconfont {
          font-size: 17px;
          margin-left: 14px;
        }
        p {
          cursor: pointer;
          margin: 0;
          user-select: none;
        }
        .popover-item {
          cursor: pointer;
        }
      }
    }
    .page-item:hover {
      border: 1px solid #1890fc;
    }
    .page-item:hover > .page-action {
      display: flex;
    }
    .activePage {
      border: 1px solid #1890fc;
      .page-name {
        span {
          color: #1890fc;
        }
      }
      .page-action {
        display: flex;
      }
      .iconfont {
        color: #1890fc;
      }
    }
  }

  .add-page {
    width: 280px;
    height: 40px;
    background: #ecf3ff;
    border-radius: 4px;
    margin: 8px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1890fc;
    cursor: pointer;
    user-select: none;
    .iconfont {
      font-size: 20px;
    }
    span {
      margin-left: 2px;
      font-weight: 600;
      line-height: 20px;
    }
  }
  .add-page:hover {
    background: #1890fc;
    color: #ffffff;
  }
}
.popover-p {
  cursor: pointer;
  user-select: none;
}
.popover-p:last-child {
  margin-bottom: 0;
}
.popover-p:hover {
  color: #1890fc;
}
</style>
